<template>
    <div class="bg-white sticky top-0 left-0 z-10">
        <ul ref="ulTarget" class="relative flex overflow-x-auto p-1 text-xs text-zinc-600 overflow-hidden">

            <!-- 汉堡按钮 -->
            <li @click="isOpenPopup = !isOpenPopup"
                class="z-20 fixed top-0 right-[-1px] h-4 px-1 flex items-center bg-white dark:bg-zinc-900 shadow-l-white dark:shadow-l-zinc">
                <m-svg-icon class="w-1.5 h-1.5" name="hamburger"></m-svg-icon>
            </li>
            <!-- 滑块 -->
            <li class="absolute h-[22px] bg-zinc-900 rounded-lg duration-200" :style="sliderStyle"></li>
            <!-- category item -->
            <li v-for="(item, index) in data" :key="item.id" class="shrink-0 px-1.5 py-0.5 z-10 duration-200 last:mr-4"
                :class="{ 'text-zinc-100 ': currentCategoryIndex === index }" @click="onItemClick(index)" :ref="setItemRef">
                {{ item.name
                }} </li>
        </ul>
        <m-popup v-model="isOpenPopup">
            <menu-vue :categorys="data" @onItemClick="onItemClick"></menu-vue>
        </m-popup>
    </div>
</template>
<script setup>
import { useScroll } from '@vueuse/core';
import { onBeforeUpdate, ref, watch } from 'vue'
import MenuVue from '@/views/main/components/menu/index.vue'
defineProps({
    data: {
        type: Array,
        required: true

    }

})
// 滑块 
const sliderStyle = ref({ transform: 'translateX(0px)', width: '52px' })
//选中的item下标
const currentCategoryIndex = ref(0)
//获取填充的所有item元素
let itemRefs = []
const setItemRef = (el) => {
    if (el) {
        itemRefs.push(el)
    }
}
onBeforeUpdate(() => {
    setItemRef.value = []
})
//获取ul元素，以计算偏移的位置
const ulTarget = ref(null)
const { x: ulScrollLeft } = useScroll(ulTarget)
watch(currentCategoryIndex, (val) => {
    //获取选中元素的left、width
    const { left, width } = itemRefs[val].getBoundingClientRect()
    //为sliderStyle设置属性
    sliderStyle.value = {
        //ul横向滚动位置+当前元素的left偏移量
        transform: `translateX(${ulScrollLeft.value + left - 10 + 'px'})`,
        width: width + 'px'
    }
})
//item点击事件
const onItemClick = (index) => {
    currentCategoryIndex.value = index
    isOpenPopup.value = false
}
// popup 展示
const isOpenPopup = ref(false)
</script>